<template>

  <div class="jyjc-right">
    <div class="jyjc-left-top-bg">
      <img :src="tableimg" alt="">

    </div>
    <div class="jyjc-right-top">
      <div class="jyjc-right-top-head">
        <div class="jyjc-right-top-headtext">当前监测信息：</div>
        <div class="jyjc-right-top-head-cont">
          <div class="jyjc-right-top-head-cont-item" v-for="item in 6" :key="item">
            {{ item }}
          </div>
        </div>
      </div>
      <div class="dividercal"></div>
      <div class="jyjc-right-top-bottom">
        <div class="jyjc-right-top-headtext">当前监测信息：</div>
        <div class="jyjc-right-top-bottom-cont">

          <div class="jyjc-right-top-bottom-cont-item" v-for="item in 6" :key="item">
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <div class="jyjc-right-bottom">
      <div class="jyjc-right-bottom-top">

        <div class="jyjc-right_text">通知信息</div>

        <div class="jyjc-right_btn" @click="messageon">发布</div>
      </div>
      <!--  -->
      <div class="rightbottom_con">
        <div class="rightbottom_con_box">
          <div class="rightbottom_con_box-item" v-for="(item, index) in simulationinforList" :key="index">
            <div class="rightbottom_con_box_item_top">
              <div class="rightbottom_con_box_item_top_left">
                <div>{{ item.publisher }}</div>
              </div>
              <div>{{ item.releaseDate }}</div>
            </div>
            <div class="rightbottom_con_box_item_bottom">
              {{ item.contentSummary }}
            </div>
          </div>
        </div>

      </div>

    </div>


  </div>

  <Eldioa :headtext="Eldioaform.headtext" :dialogVisible="editdialogVisible" @eddialogVisible="updateDialogVisible"
    :elwidth="Eldioaform.elwidth" :elheight="Eldioaform.elheight">
    <template #dialogbody>
      <Elfrom :form-config="editformdataconfig" v-model="editform" :show-actions="false" @elsubmit="elsubmitbtn"
        ref="editformRef" />

      <div class="dialog-footer" style="text-align: right;">
        <el-button type="primary" style="background: rgba(4, 134, 254, 1);" @click="elhandleSubmit">
          {{ Eldioaform.headtext == '任务详情' ? '任务完成' : '确认' }}
        </el-button>

        <el-button style="background: transparent;border:1px solid rgba(89, 175, 249, 0.70);color:rgba(1, 194, 255, 1)"
          @click="handleCancel">
          取消
        </el-button>

        <el-button v-if="Eldioaform.headtext == '任务详情'" type="primary" style="background: rgba(4, 134, 254, 1);"
          @click="handleCancel">
          确认
        </el-button>

      </div>

    </template>
  </Eldioa>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import Eldioa from '@/components/eldioa/index.vue'
import Elfrom from '@/components/elfrom/index.vue'
import formConfig from './mnformconfig'
import { useUserStore } from '@/stores'
import tableImgSrc from '@/assets/img/jyjc/righthed.png'
const tableimg = ref(tableImgSrc)
import { getsimulationinforList } from '@/api'

const UserStore = useUserStore()



onMounted(() => {
  getsimulationinforListapi()
})

const simulationinforList = ref([])

const getsimulationinforListapi = async () => {
  const { data } = await getsimulationinforList()

  simulationinforList.value = data
}

const messageon = () => {
  editdialogVisible.value = true
  Eldioaform.value.headtext = '发布'
  Eldioaform.value.formtype = '发布'
  Eldioaform.value.elheight = 260
  resetFieldsform(editform.value, editformdata.value)
  editform.value.publisher = UserStore?.userInfo?.username
  editform.value.releaseDate = new Date().toISOString()

  setTimeout(() => {
    editformRef.value?.clearValidate()
  }, 100)

}


const Eldioaform = ref({
  headtext: '发布',
  elwidth: 746,
  elheight: 260,
  formtype: '发布'
})




const editdialogVisible = ref(false)

const updateDialogVisible = (newValue) => {
  editdialogVisible.value = newValue
  editformRef.value.handleReset()
  resetFieldsform(editform.value, editformdata.value)
}



const editformdataconfig = computed(() => {

  let formconfig = null
  switch (Eldioaform.value.formtype) {

    case '发布':
      formconfig = formConfig.Messagesub
      break;
  }


  return formconfig

})

// 表单数据
const editformdata = computed(() => {
  let formdata = null
  switch (Eldioaform.value.formtype) {

    case '发布':
      formdata = formConfig.Messagesubdata
      break;
  }

  return formdata
})


// 表单数据
const editform = ref({ ...editformdata.value })

const editformRef = ref()

// 根据按钮属性提交表单
const elsubmitbtn = async (editsubdata) => {
  console.log('editsubdata', editsubdata)

  switch (Eldioaform.value.formtype) {


    case '发布':
      await postsimulationinfor(editform.value,)
      await getsimulationinforListapi()
      break;
  }
  resetFieldsform(editform.value, editformdata.value)
  handleCancel()
}


// 确认表单
const elhandleSubmit = async () => {
  if (!editformRef.value) return
  try {
    await editformRef.value.handleSubmit()
  } catch (error) {
    console.error('表单提交失败:', error)
  }
}


// 关闭
const handleCancel = () => {
  if (!editformRef.value) return
  editformRef.value.handleReset()
  editdialogVisible.value = false

  resetFieldsform(editform.value, editformdata.value)


}

// 重置表单
const resetFieldsform = (form, comform) => {
  console.log('form', form, comform)
  Object.keys(form).forEach(key => {
    if (key in comform) {
      form[key] = comform[key]
    } else {
      form[key] = ''
    }
  })
}



</script>

<style lang="less" scoped>
.jyjc-right {
  position: absolute;
  right: 0;
  width: 430px;
  z-index: 2;
  // background: red;
  height: calc(100vh - 130px);
  overflow-y: auto;
  overflow-x: hidden;
  /* 隐藏滚动条但仍可滚动 */
  scrollbar-width: none;
  margin-right: 24px;
  background: rgba(21, 33, 86, 0.6);



  .jyjc-right-top {
    width: 390px;
    height: 460px;
    // background: #11375B 0.6;
    border-radius: 4px;
    border: 1px solid #1D6DB7;
    padding-left: 21px;
    margin: 0 auto;
    margin-top: 23px;

    .dividercal {
      width: 350px;
      height: 1px;
      background: rgba(231, 238, 255, 0.3);
    }


    .jyjc-right-top-headtext {
      font-size: 12px;
      color: #8CCBFF;
      line-height: 17px;
      margin-top: 18px;
    }

    .jyjc-right-top-head {
      height: 270px;

      // background: red;
      .jyjc-right-top-head-cont {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        margin-top: 16px;

        .jyjc-right-top-head-cont-item {
          width: 150px;
          color: #fff;
        }
      }


    }

    .jyjc-right-top-bottom {
      height: 100px;
      // background: pink;
      margin-top: 20px;


      .jyjc-right-top-bottom-cont {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        margin-top: 16px;

        .jyjc-right-top-bottom-cont-item {
          width: 150px;
          color: #fff;
        }
      }
    }




  }



  .jyjc-right-bottom {
    width: 390px;
    height: 363px;
    // background: #11375B;
    border-radius: 4px;
    border: 1px solid #1D6DB7;
    padding-left: 21px;
    margin: 0 auto;
    margin-top: 23px;

    margin-bottom: 20px;


    .jyjc-right-bottom-top {
      height: 20px;
      width: 100%;
      display: flex;

      padding-top: 18px;
      padding-right: 18px;
      align-items: center;
      justify-content: space-between;

      .jyjc-right_text {

        height: 17px;
        font-size: 12px;
        color: #8CCBFF;
        line-height: 17px;

      }

      .jyjc-right_btn {
        cursor: pointer;
        height: 17px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 12px;
        color: #8CCBFF;
        line-height: 17px;
        margin-right: 10px;

      }
    }

    .rightbottom_con {
      height: 291px;
      margin-top: 17px;

      .rightbottom_con_box {
        padding-right: 18px;
        height: calc(3 * 83px + 3 * 10px);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        justify-content: space-between;
        gap: 10px;
        /* 隐藏滚动条但仍可滚动 */
        scrollbar-width: none;
        color: #fff;

        /* IE and Edge */
        .rightbottom_con_box-item {
          display: flex;
          width: 100%;
          height: 103px;
          flex-shrink: 0;
          flex-direction: column;
          border-bottom: 1px solid rgba(231, 238, 255, 0.30);

          .rightbottom_con_box_item_top {
            display: flex;
            justify-content: space-between;

            .rightbottom_con_box_item_top_left {
              display: flex;
            }
          }

          .rightbottom_con_box_item_bottom {
            margin-top: 10px;
            width: 100%;
            height: 56px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            font-size: 12px;
            margin-bottom: 10px;
            // overflow: hidden;
            // text-overflow: ellipsis;

            word-wrap: break-word;
            word-break: break-all;
            overflow: hidden;
          }
        }

        .rightbottom_con_box-item:last-child {
          border: none;
        }
      }

      /* 隐藏 Webkit 浏览器的滚动条 */
      .rightbottom_con_box::-webkit-scrollbar {
        display: none;
      }
    }


  }
}

.jyjc-left-top-bg {
  padding-left: 3px;
  width: 100%;
  height: 46px;
  background-image: url('@/assets/img/jsc/lefthead.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;

  img {
    width: 102px;
    height: 26px;
    position: absolute;
    top: 10px;
    left: 12px;
  }

  .jyjc-left-top-text {
    position: absolute;
    top: 12px;
    font-weight: bold;
    left: 34px;
    z-index: 3;
    font-family: ZHDH, ZHDH;
    font-size: 18px;
    color: #9AC5D1;


  }
}
</style>